<template>
  <div class="invoiceForm">
    <div class="page">
      <div v-if="false" class="block" style="margin-top:12px">
        <div class="boxitem">
          <div class="title">发票类型</div>
          <div class="content">
            <div class="grid">
              <div class="grid-1-2">
                <div
                  class="button"
                  :class="isOrdinary?'active':''"
                  @click="onInvoiceType(0)"
                >普通发票
                </div>
              </div>
              <div class="grid-1-2">
                <div
                  class="button"
                  :class="isIncrement?'active':''"
                  @click="onInvoiceType(2)"
                >增值税专用发票
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 发票 -->
      <div style="margin-top:12px;">
        <div>
          <div class="block">
            <div class="boxitem">

              <div class="title" style="display: flex;justify-content: space-between;">
                <div v-if="isOrdinary">发票抬头</div>
                <div v-if="isIncrement">增票资质</div>
                <div style="font-size: 12px;font-weight: normal" @click="onChoiceInvoice" v-if="isUnit || isIncrement">
                  选择开票信息>>
                </div>
              </div>
              <div class="content">

                <!--仅普通发票显示该信息-->
                <div class="grid" v-if="isOrdinary" style="margin-bottom: 30px">
                  <div class="grid-1-2">
                    <div
                      class="button"
                      :class="isPersonal?'active':''"
                      @click="onInvoiceHead(0)"
                    >个人
                    </div>
                  </div>
                  <div class="grid-1-2">
                    <div
                      class="button"
                      :class="isUnit?'active':''"
                      @click="onInvoiceHead(1)"
                    >单位
                    </div>
                  </div>
                </div>

                <!--仅个人显示-->
                <template v-if="isPersonal">
                  <div class="inputbox">
                    <div class="text"><span class="required">*</span>个人名称</div>
                    <input class="input" v-model="invoiceForm.inv_title" placeholder="请输入个人名称" @focusout="inputBlur" @focusin="inputFocus">
                  </div>
                </template>

                <!--企业或增值票显示-->
                <template v-if="isIncrement || isUnit">
                  <div class="inputbox">
                    <div class="text"><span class="required">*</span>发票抬头</div>
                    <input class="input" v-model="invoiceForm.inv_company" placeholder="请输入发票抬头" @focusout="inputBlur" @focusin="inputFocus">
                  </div>
                  <div class="inputbox">
                    <div class="text"><span class="required">*</span>税务登记证号</div>
                    <input class="input" v-model="invoiceForm.inv_code" placeholder="请输入税务登记证号" @focusout="inputBlur" @focusin="inputFocus">
                  </div>
                  <div class="inputbox">
                    <div class="text"><span class="required">*</span>注册场所地址</div>
                    <input class="input" v-model="invoiceForm.inv_reg_address" placeholder="请输入注册场所地址" @focusout="inputBlur" @focusin="inputFocus">
                  </div>
                  <div class="inputbox">
                    <div class="text"><span class="required">*</span>注册固定电话</div>

                    <input class="input" v-model="invoiceForm.inv_reg_phone" placeholder="注册固定电话 如 028-11223344" @focusout="inputBlur" @focusin="inputFocus">

                  </div>

                  <div class="inputbox">
                    <div class="text"><span class="required">*</span>开户行名称</div>
                    <input class="input" maxlength="50" v-model="invoiceForm.inv_reg_bname"
                           placeholder="请输入开户行名称" @focusout="inputBlur" @focusin="inputFocus">
                  </div>

                  <div class="inputbox">
                    <div class="text"><span class="required">*</span>基本开户账号</div>
                    <input class="input" maxlength="24" v-model="invoiceForm.inv_reg_bank_account"
                           placeholder="请输入基本开户账号" @focusout="inputBlur" @focusin="inputFocus">
                  </div>
                </template>

              </div>
            </div>
          </div>
          <div v-if="false" class="block">
            <div class="boxitem">
              <div class="title">收票人信息</div>
              <div class="content">
                <div class="inputbox">
                  <div class="text"><span class="required">*</span>收票人手机号</div>
                  <input
                    class="input"
                    v-model="invoiceForm.inv_phone"
                    placeholder="请输入手机号"
                    type="text"
                    maxlength="11"
                    @focusout="inputBlur"
                    @focusin="inputFocus"
                  >
                </div>

                <!--仅增值票-->
                <template v-if="isIncrement">
                  <div class="inputbox">
                    <div class="text"><span class="required">*</span>收票人姓名</div>
                    <input class="input" v-model="invoiceForm.inv_name" placeholder="请输入姓名" @focusout="inputBlur" @focusin="inputFocus">
                  </div>

                  <div class="inputbox">
                    <div class="text"><span class="required">*</span>详细地址</div>
                    <input class="input" v-model="invoiceForm.inv_address" placeholder="请输入详细地址" @focusout="inputBlur" @focusin="inputFocus">
                  </div>
                </template>

                <!--仅普票显示-->
                <div class="inputbox" v-if="isOrdinary">
                  <div class="text">收票人邮箱</div>
                  <input
                    class="input"
                    v-model="invoiceForm.inv_email"
                    placeholder="请输入邮箱"
                    type="text"
                    @focusout="inputBlur"
                    @focusin="inputFocus"
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="block" style="margin-top:12px;">
        <div class="boxitem">
          <div class="title"><span class="required">*</span>发票内容</div>
          <div class="content">
            <div class="grid" style="align-items: center">
              <div class="grid-1-2">
                <div
                  class="button"
                  :class="invoiceContentIndex==1?'active':''"
                  @click="onInvoiceContent(1)"
                >商品明细
                </div>
              </div>
              <div class="grid-1-2">
                <!--                <div-->
                <!--                  v-if="isOrdinary"-->
                <!--                  class="button"-->
                <!--                  :class="invoiceContentIndex==2?'active':''"-->
                <!--                  @click="onInvoiceContent(2)"-->
                <!--                >商品类别-->
                <!--                </div>-->
                <!--                <div v-else style="font-size:12px">增值税发票只支持明细</div>-->
                <div style="font-size:12px">发票内容将显示详细商品名称与价格信息</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="block" style="margin-top: 20px">
        <button class="button" type="warn" @click="onSubmit">确定</button>
        <a style="margin: 10px;display: block;color: #1988e8;text-align: right" @click="onLater">稍后再填</a>
      </div>
    </div>

    <!--选择发票弹框-->
    <div class="invoiceContent invoiceForm" v-if="isShowInvoice">
      <div class="invoiceContent-title">选择发票信息</div>
      <div :class="['invoice-item', invoiceIndex === index ? 'invoice-item-checked' : null]"
           v-for="(item, index) in list" :key="index" @click="onInVoice(index, item)">
        <div class="invoice-item-list invoice-item-type">
          <div class="invoice-item-type-con">
            <div class="invoice-item-list-tit">发票抬头：</div>
            <div class="invoice-item-list-val">{{item.inv_company}}</div>
          </div>
          <div class="invoice-item-list-default" v-if="isDefault(item, index)">默认</div>
        </div>
        <div class="invoice-item-list">
          <div class="invoice-item-list-tit">税务登记证号：</div>
          <div class="invoice-item-list-val">{{item.inv_code}}</div>
        </div>
        <div class="invoice-item-list">
          <div class="invoice-item-list-tit">注册场所地址：</div>
          <div class="invoice-item-list-val">{{item.inv_reg_address}}</div>
        </div>
        <div class="invoice-item-list">
          <div class="invoice-item-list-tit">注册固定电话：</div>
          <div class="invoice-item-list-val">{{item.inv_reg_phone}}</div>
        </div>
        <div class="invoice-item-list" v-if="item.inv_reg_bname">
          <div class="invoice-item-list-tit">开户行名称：</div>
          <div class="invoice-item-list-val">{{item.inv_reg_bname}}</div>
        </div>
        <div class="invoice-item-list">
          <div class="invoice-item-list-tit">基本开户账号：</div>
          <div class="invoice-item-list-val">{{item.inv_reg_bank_account}}</div>
        </div>
      </div>
      <div class="invoiceContent-btn">
        <div class="invoiceContent-btn-cancel" @click="onCancel">取消</div>
        <div class="invoiceContent-btn-ope" @click="onDetermine">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
  // import Me from '@/dll/me'
  import invoice from '../../mixin/invoice'

  export default {
    name: 'invoiceForm',
    mixins: [invoice],
    props: {
      value: {},
      isQuota: {
        default: 0
      }
    },
    data () {
      return {
        invoiceTypeIndex: 0,
        invoiceHeadIndex: 0,
        invoiceContentIndex: 1,
        // 发票信息表单
        invoiceForm: {
          inv_type: 0, // 发票抬头
          inv_title: '个人', // 个人名称
          inv_company: '', // 单位名称
          inv_code: '', // 纳税人识别号
          inv_content: 0, // 发票内容
          // inv_phone: '', // 收票人手机
          // inv_email: '', // 收票人邮箱
          inv_reg_address: '', // 注册地址
          inv_reg_phone: '', // 注册电话
          inv_reg_bank_account: '', // 银行账号
          inv_reg_bname: '' // 开户行名称
          // inv_name: '', // 收票人姓名
          // inv_address: '' // 详细地址
        },
        taxpayerIdentificationReg: /^[0-9a-zA-Z]{5,24}$/, // 纳税人识别号正则
        // bankReg: /^[0-9]{15,19}$/, // 银行账号正则
        bankReg: /^[0-9]{5,24}$/, // 银行账号正则
        invoiceInfo: {},
        validate: false,

        isShowInvoice: false, // 是否显示发票列表
        invoiceIndex: -1,
        invoiceItem: {}
      }
    },

    created () {
      // if (parseFloat(this.isQuota) > 0) { // 使用了额度
      //   this.invoiceHeadIndex = 1
      // }
    },

    watch: {
      // isQuota (val, old) {
      //   if (parseFloat(val) > 0) {
      //     this.invoiceHeadIndex = 1
      //   }
      // }
    },

    computed: {
      // 判断是否是普通发票
      isOrdinary () {
        return this.invoiceTypeIndex === 0
      },

      // 判断是否是增值发票
      isIncrement () {
        return this.invoiceTypeIndex === 2
      },

      // 判断是否是个人发票
      isPersonal () {
        // if (Number(this.isQuota) === 0 && this.invoiceTypeIndex === 0 && this.invoiceHeadIndex === 0) {
        //   return true
        // }
        return this.invoiceHeadIndex === 0 && this.invoiceTypeIndex === 0
      },

      // 判断是否是单位发票
      isUnit () {
        return this.invoiceHeadIndex === 1 && this.invoiceTypeIndex === 0
      },

      // 是否默认
      isDefault () {
        return (item, index) => {
          if (this.invoiceIndex === index || parseFloat(item.is_default) === 1) {
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.invoiceItem = item
          }
          return parseFloat(item.is_default) === 1
        }
      }
    },

    mounted () {
      // 如果是重庆电信或者西部智谷默认为个人发票
      if (this.isCQDX || this.isXBZG) {
        this.onSubmit()
      }
    },
    methods: {
      // 发票类型切换
      onInvoiceType (index) {
        if (index == this.invoiceTypeIndex) {
          return
        }

        let invoiceContentIndex = this.invoiceContentIndex
        if (index == 2) {
          invoiceContentIndex = 1
        }
        this.invoiceTypeIndex = index
        this.invoiceContentIndex = invoiceContentIndex
      },
      onInvoiceHead (index) {
        // if (parseFloat(this.isQuota) > 0) { // 使用了额度
        //   this.invoiceHeadIndex = 1
        //   return
        // }
        if (index == this.invoiceHeadIndex) {
          return
        }
        this.invoiceHeadIndex = index
      },
      onInvoiceContent (index) {
        this.invoiceContentIndex = index
      },
      onSubmit () {
        if (this.validateInvoice()) {
          this.subIssueInfo()
          this.$emit('input', false)
        }
      },

      // 验证发票信息
      validateInvoice () {
        let validate = false
        if (this.isPersonal) { // 如果是个人
          this.$delete(this.invoiceInfo, 'general')
          this.$delete(this.invoiceInfo, 'vat')
          if (!this.invoiceForm.inv_title) {
            this.$vux.toast.text('请填写个人名称')
            return false
          }
        }
        if (this.isUnit || this.isIncrement) { // 如果是企业或增值
          this.$delete(this.invoiceInfo, 'personal')
          if (!this.invoiceForm.inv_company) {
            this.$vux.toast.text('请填写单位名称')
            return false
          }
          if (!this.taxpayerIdentificationReg.test(this.invoiceForm.inv_code)) {
            this.$vux.toast.text('纳税人识别号格式不正确')
            return false
          }
          if (!this.invoiceForm.inv_reg_address) {
            this.$vux.toast.text('注册地址不能为空')
            return false
          }
          if (!this.invoiceForm.inv_reg_phone) {
            this.$vux.toast.text('注册电话不能为空')
            return false
          }
          if (!this.invoiceForm.inv_reg_bname) {
            this.$vux.toast.text('开户行名称不能为空')
            return false
          }
          if (!this.bankReg.test(this.invoiceForm.inv_reg_bank_account)) {
            this.$vux.toast.text('银行账号格式不正确')
            return false
          }
        }
        // if (!this.invoiceForm.inv_phone) {
        //   this.$vux.toast.text('收票人手机号不能为空')
        //   return false
        // }
        // if (this.isIncrement) { // 如果是增值
        //   if (!this.invoiceForm.inv_name) {
        //     this.$vux.toast.text('收票人姓名不能为空')
        //     return false
        //   }
        //   if (!this.invoiceForm.inv_address) {
        //     this.$vux.toast.text('详细地址不能为空')
        //     return false
        //   }
        // }
        validate = true
        this.validate = validate
        this.$emit('invoicePerfect', validate)
        return true
      },

      // 提交发票信息
      subIssueInfo () {
        let invoiceInfo = {}
        let personal = {}
        let general = {}
        let vat = {}
        if (this.isPersonal) { // 如果是个人
          invoiceInfo.type = 0 // 类型
          personal.inv_title = this.invoiceForm.inv_title // 抬头
          // personal.inv_email = this.invoiceForm.inv_email
          // personal.inv_phone = this.invoiceForm.inv_phone
          personal.inv_content = this.invoiceContentIndex
          invoiceInfo.personal = personal
        }
        if (this.isUnit) { // 如果是企业
          invoiceInfo.type = 1 // 类型
          general.inv_company = this.invoiceForm.inv_company // 单位名称
          general.inv_code = this.invoiceForm.inv_code // 纳税人识别号
          // general.inv_phone = this.invoiceForm.inv_phone
          general.inv_reg_address = this.invoiceForm.inv_reg_address // 公司注册地址
          general.inv_reg_phone = this.invoiceForm.inv_reg_phone // 公司注册电话
          general.inv_reg_bank_account = this.invoiceForm.inv_reg_bank_account // 银行账号
          general.inv_reg_bname = this.invoiceForm.inv_reg_bname // 开户行名称
          // general.inv_email = this.invoiceForm.inv_email
          general.inv_content = this.invoiceContentIndex
          invoiceInfo.general = general
        }
        if (this.isIncrement) { // 如果是增值
          invoiceInfo.type = 2 // 类型
          // vat.inv_address = this.invoiceForm.inv_address // 收件人详细地址
          // vat.inv_name = this.invoiceForm.inv_name // 收件人姓名
          vat.inv_company = this.invoiceForm.inv_company // 单位名称
          vat.inv_code = this.invoiceForm.inv_code // 纳税人识别号
          // vat.inv_phone = this.invoiceForm.inv_phone
          vat.inv_reg_address = this.invoiceForm.inv_reg_address // 公司注册地址
          vat.inv_reg_phone = this.invoiceForm.inv_reg_phone // 公司注册电话
          vat.inv_reg_bank_account = this.invoiceForm.inv_reg_bank_account // 银行账号
          vat.inv_reg_bname = this.invoiceForm.inv_reg_bname // 开户行名称
          vat.inv_content = this.invoiceContentIndex
          invoiceInfo.vat = vat
        }
        this.invoiceInfo = invoiceInfo
        return invoiceInfo
      },

      // 选择发票
      onInVoice (index, item) {
        this.invoiceIndex = index
        this.invoiceItem = item
      },

      // 确定
      onDetermine () {
        this.invoiceForm.inv_company = this.invoiceItem.inv_company
        this.invoiceForm.inv_code = this.invoiceItem.inv_code
        this.invoiceForm.inv_reg_address = this.invoiceItem.inv_reg_address
        this.invoiceForm.inv_reg_phone = this.invoiceItem.inv_reg_phone
        this.invoiceForm.inv_reg_bank_account = this.invoiceItem.inv_reg_bank_account
        this.invoiceForm.inv_reg_bname = this.invoiceItem.inv_reg_bname
        this.isShowInvoice = false
      },

      // 取消
      onCancel () {
        this.isShowInvoice = false
      },

      // 选择开票信息
      onChoiceInvoice () {
        this.isShowInvoice = true
      },

      // 稍后再填
      onLater () {
        this.$emit('invoicePerfect', false)
        this.$emit('input', false)
      }
    }
  }
</script>

<style lang="less" scoped>
  .invoiceForm {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    z-index: 100;
    background: #fbf8f7;
    overflow: auto;
  }

  .boxitem {
    background-color: #fff;
  }

  .boxitem .title {
    font-size: 15px;
    color: #351009;
    line-height: 21px;
    padding: 14px 24px;
  }

  .boxitem .content {
    padding: 14px 24px;
  }

  .boxitem .button {
    text-align: center;
    height: 28px;
    line-height: 28px;
    border: 1px solid #d4d4d4;
    font-size: 12px;
    width: 140px;
    margin: auto;
  }

  .boxitem .button.active {
    border: 1px solid #ae2309;
    color: #ae2309;
  }

  .inputbox {
    display: flex;
    align-items: center;
  }

  .inputbox .text {
    margin-right: 12px;
    font-size: 12px;
    color: #351009;
    width: 80px;
  }

  .inputbox .input {
    border: 1px solid #f1edec;
    padding: 0 12px;
    box-sizing: border-box;
    display: block;
    flex: 1;
    font-size: 12px;
    color: #351009;
    height: 33px;
    line-height: 33px;
  }

  .inputbox + .inputbox {
    margin-top: 12px;
  }

  .invoiceitem {
    background-color: #fff;
    padding: 12px 24px;
    font-size: 12px;
    color: #9f8d89;
    display: flex;
    flex-direction: row;
    line-height: 17px;
  }

  .invoiceitem .text {
    margin-left: 5px;
    flex: 1;
  }

  .required {
    color: red;
  }

  /*发票列表*/
  .invoiceContent {
    z-index: 200;
    padding: 10px 10px 58px;
    font-size: 14px;
  }

  .invoiceContent-title {
    padding: 10px 0;
    text-align: center;
  }

  .invoice-item {
    text-align: left;
    color: #333;
    background: #fff;
  }

  .invoice-item {
    border: 1px solid rgba(0, 0, 0, 0.17);
    margin-bottom: 10px;
    padding: 8px;
  }

  .invoice-item-checked {
    border-color: #b0290f !important;
  }

  .invoice-item-list {
    display: flex;
    padding: 4px 0;
    font-size: 13px;
  }

  .invoice-item-type {
    justify-content: space-between;
  }

  .invoice-item-type-con {
    display: flex;
  }

  .invoice-item-list-default {
    padding: 0 3px;
    background: #b0290f;
    color: #fff;
    flex-shrink: 0;
    height: 19px;
    line-height: 19px;
  }

  .invoice-item-list-tit {
    flex-shrink: 0;
  }

  .invoiceContent-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background: #fff;
  }

  .invoiceContent-btn > div {
    width: 120px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    border: 1px solid #d4d4d4;
    margin: 10px 15px;
  }

  .invoiceContent-btn-ope {
    background: #b0290f;
  }

  .invoiceContent-btn-cancel {
    background: rgba(0, 0, 0, 0.2);
  }
</style>
